<template>
  <div class='app-container'>
    <tree :setting="setting" :nodes="nodes" @onClick="onClick" />
  </div>
</template>

<script>
import tree from "vue-giant-tree";
export default {
  props: {
    nodes: [Array],
  },
  data() {
    function setNodeClasses(treeId, treeNode) {
      console.log("treeId, treeNode: ", treeId, treeNode);
      let level = treeNode.level;
      switch (level) {
        case level:
          return { add: [`level_0${level} level_a`] };
          break;
      }
    }
    return {
      set: {
        check: {
          enable: false,
        },
        view: {
          showIcon: true,
          showLine: true,
          nodeClasses: setNodeClasses,
        },
        data: {
          simpleData: {
            enable: true,
            pIdKey: "pid",
          },
        },
      },
      nodes: [],
    };
  },

  components: { tree },

  computed: {},

  mounted() {},

  watch: {},

  methods: {
    onClick: function (evt, treeId, treeNode) {
      // 点击事件
      console.log(evt.type, treeNode);
    },
  },
  handleCreated: function (ztreeObj) {
    // onCreated 中操作ztreeObj对象展开第一个节点
    ztreeObj.expandNode(ztreeObj.getNodes()[0], true);
  },
};
</script>

<style  lang='scss' scoped>
::v-deep .ztree {
  .level_a span.button {
    margin-right: 2px;
    vertical-align: top;
    *vertical-align: middle;
  }
  .level_00 {
    span.button {
      background: url("http://www.treejs.cn/v3/css/zTreeStyle/img/diy/3.png")
        no-repeat transparent;
      background-size: 100% 100%;
    }
  }
  .level_01 {
    span.button {
      //这本地图片显示不出来。网络图片就可以
      background: url("../assets/icons/png/aiming.png") no-repeat transparent;
      background-size: 100% 100%;
    }
  }
  .level_02 {
    span.button {
      background: url("../assets/icons/png/user_group.png") no-repeat
        transparent;
      background-size: 100% 100%;
    }
  }
}
</style>